<UserControl
  xmlns="https://github.com/avaloniaui"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:vm="using:ControlsSandbox.ViewModels"
  xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"
  xmlns:ia="clr-namespace:Avalonia.Xaml.Interactions.Core;assembly=Avalonia.Xaml.Interactions"
  xmlns:ctrl="using:ControlsSandbox.Controls"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  x:Class="ControlsSandbox.Views.BlockView">

  <Design.DataContext>
    <vm:BlockViewModel/>
  </Design.DataContext>

  <Grid RowDefinitions="Auto,*" Background="White">
    <Border
      Background="White"
      BorderBrush="Gray"
      BorderThickness="1"
      Width="{Binding Width, Converter={StaticResource mm}}"
      Height="{Binding HeaderHeight, Converter={StaticResource mm}}">
      <Grid ColumnDefinitions="Auto,*,Auto">
        <Grid.Background>
          <LinearGradientBrush
            StartPoint="0%,0%"
            EndPoint="0%,100%">
            <LinearGradientBrush.GradientStops>
              <GradientStop
                Offset="0"
                Color="{Binding BlockHeaderColorStart}"/>
              <GradientStop
                Offset="1"
                Color="{Binding BlockHeaderColorStop}"/>
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Grid.Background>
        <Label
          Grid.Column="0"
          Foreground="Black"
          Background="Transparent"
          FontFamily="Arial"
          FontSize="{Binding HeaderFont, Converter={StaticResource mm}}"
          FontWeight="SemiBold"
          Content="{Binding HeaderArrowGlyph}"
          VerticalAlignment="Center"
          Padding="{Binding HeaderItemsPaddings, Converter={StaticResource mm}}">
          <i:Interaction.Behaviors>
            <ia:EventTriggerBehavior EventName="Tapped" SourceObject="{Binding #ChangeExpandedState}">
              <ia:InvokeCommandAction Command="{Binding ChangeExpandedState}"/>
            </ia:EventTriggerBehavior>
          </i:Interaction.Behaviors>
        </Label>
        <Label
          Grid.Column="1"
          Foreground="Black"
          Background="Transparent"
          FontFamily="Arial"
          FontSize="{Binding HeaderFont, Converter={StaticResource mm}}"
          FontWeight="SemiBold"
          Content="{Binding Header}"
          VerticalAlignment="Center"
          HorizontalAlignment="Stretch"
          Padding="{Binding HeaderItemsPaddings, Converter={StaticResource mm}}">
          <i:Interaction.Behaviors>
            <ia:EventTriggerBehavior EventName="Tapped" SourceObject="{Binding #ChangeSelectedState}">
              <ia:InvokeCommandAction Command="{Binding ChangeSelectedState}"/>
            </ia:EventTriggerBehavior>
          </i:Interaction.Behaviors>
        </Label>
        <Label
          Grid.Column="2"
          Foreground="Black"
          Background="Transparent"
          FontFamily="Arial"
          FontSize="{Binding HeaderFont, Converter={StaticResource mm}}"
          FontWeight="SemiBold"
          Content="{Binding HeightMillimetersText}"
          VerticalAlignment="Center"
          HorizontalAlignment="Center"
          Padding="{Binding HeaderItemsPaddings, Converter={StaticResource mm}}">
          <i:Interaction.Behaviors>
            <ia:EventTriggerBehavior EventName="Tapped" SourceObject="{Binding #ChangeSelectedState}">
              <ia:InvokeCommandAction Command="{Binding ChangeSelectedState}"/>
            </ia:EventTriggerBehavior>
          </i:Interaction.Behaviors>
        </Label>
      </Grid>
    </Border>
    <ItemsControl
      Grid.Row="1"
      Padding="0"
      IsVisible="{Binding IsExpanded}"
      Items="{Binding Items}"
      Background="White"
      Width="{Binding Width, Converter={StaticResource mm}}"
      Height="{Binding Height, Converter={StaticResource mm}}">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <Canvas />
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      <ItemsControl.Styles>
        <Style Selector="ItemsControl ContentPresenter">
          <Setter Property="Canvas.Left" Value="{Binding X, Converter={StaticResource mm}}" />
          <Setter Property="Canvas.Top" Value="{Binding Y, Converter={StaticResource mm}}" />
        </Style>
      </ItemsControl.Styles>
      <i:Interaction.Behaviors>
        <ia:EventTriggerBehavior EventName="Tapped" SourceObject="{Binding #ChangeSelectedState}">
          <ia:InvokeCommandAction Command="{Binding ChangeSelectedState}"/>
        </ia:EventTriggerBehavior>
      </i:Interaction.Behaviors>
    </ItemsControl>
    <!-- <ctrl:LineControl Grid.Row="2" X1="10" Y1="5" X2="100" Y2="50" Thickness="3"/> -->
  </Grid>
  
</UserControl>
